<template>
	<view class="login">
		<view class="avator-box"><image class="avator" src="../../../static/image/icons/leju-logo.png"></image></view>
		<view class="login-info">
			<form @submit="formSubmit"   @reset="formReset">
				<view class="username">
					<input type="text" name="username" value="emmm" placeholder="请输入手机号/邮箱" />
				</view>
				<view class="password">
					<input type="password" name="password" value="123456" placeholder="请输入密码" />
				</view>
				<view class="btns">
					<button form-type="submit" class="btn" :class="{ active: !loaddingFlag }">
						<text v-if="loaddingFlag">登录</text>
						<view class="quan" v-else>
							<view class="dang">
								
							</view>
						</view>
					</button>
				</view>
			</form>
			<view class="option">
				<text>海外手机号登录</text>
				<navigator url="../findPassword/findPassword">忘记密码</navigator>
			</view>
			<navigator url="../register/register" class="register">
				立即注册
			</navigator>
			<view class="third">
				<view class="title">
					<view class="line">
					</view>
					<text>第三方软件登录</text>
					<view class="line">
					</view>
				</view>
				<view class="method">
					<view class="item">
						<image src="../../../static/image/icons/QQ.png" mode=""></image>
					</view>
					<view class="item">
						<image src="../../../static/image/icons/xl.png" mode=""></image>
					</view>
					<view class="item">
						<image src="../../../static/image/icons/wx.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
 import { doLogin } from '../../../utils/mine/login/index.js'
export default {
	data() {
		return {
			loaddingFlag: true
		};
	},
	methods: {
	 async	formSubmit (e) {
		 uni.showToast({
		 	icon: 'loading'
		 })
		 this.loaddingFlag = false;
			console.log(e);
			let data = await doLogin(e.detail.value);
			console.log(data);
			if (data.data.code == 'S') {
				uni.setStorageSync('userInfo', data.data.data);
				uni.switchTab({
					url: '/pages/mine/index'
				})
				this.loaddingFlag = true;
				uni.hideToast()
			} else {
				uni.hideToast()
				uni.showToast({
					icon: 'none',
					title: '用户名或密码错误'
				})
				this.loaddingFlag = true;
			}
		}
	}
};
</script>

<style lang="scss">
@keyframes mymove {
	0% {
		transform: rotate(0deg);
	},
	100% {
		transform: rotate(720deg);
	}
}
.login {
	width: 100%;
	min-height: 100vh;
	max-width: 100%;
	background-color: #f1ece7;
	.avator-box {
		padding: 154rpx 268rpx 186rpx 270rpx;
		.avator {
			width: 212rpx;
			height: 212rpx;
			border-radius: 50%;
		}
	}
	.login-info {
		width: 100%;
		box-sizing: border-box;
		padding: 0 107rpx;
		.username, .password {
			width: 536rpx;
			height: 78rpx;
			background: rgba(61,76,70, 0.08);
			border-radius: 14rpx;
			margin-bottom: 36rpx;
			input {
				width: 100%;
				height: 100%;
				font-size: 24rpx;
				box-sizing: border-box;
				padding-left: 26rpx;
				// color: #9F9F9F;
				letter-spacing: 1.71rpx;
			}
		}
		.password {
			margin-bottom: 0;
		}
		.btns {
			margin: 48rpx 0 22rpx 0;
			.btn {
				background: #354E44;
				font-size: 30rpx;
				width: 100%;
				height: 94rpx;
				color: #FFFFFF;
				letter-spacing: 2.14rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: bolder;
				transition: all .5s;
				&.active {
					width: 94rpx;
					border-radius: 50%;
				}
				.quan {
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					// background-color: #fff;
					border: 2px solid #fff;
					// transform: rotate(720deg);
					// transition: all 5s;
					animation: mymove 3s infinite linear; 
					.dang {
							width: 30rpx;
							height: 30rpx;
							border-radius: 50%;
							background: #354E44;
							margin: 0 15rpx 0 0;
					}
				}
			}
		}
		.option {
			width: 100%;
			font-size: 24rpx;
			color: #A5A5A5;
			letter-spacing: 1.71rpx;
			display: flex;
			justify-content: space-between;
		}
		.register {
			margin-top: 239rpx;
			width: 100%;
			display: flex;
			justify-content: center;
			font-size: 40rpx;
			color: #354E44;
			letter-spacing: 2.86rpx;
			font-weight: bolder;
		}
		.third {
			margin-top: 46rpx;
			width: 100%;
			.title {
				width: 100%;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #A5A5A5;
				letter-spacing: 1.71rpx;
				.line {
					width: 126rpx;
					height: 2rpx;
					// border: 2px solid #DDDDDD;
					background-color:#DDDDDD;
				}
				text {
					flex: 1;
					display: flex;
					justify-content: center;
				}
			}
			.method {
				width: 296rpx;
				margin: 64rpx auto 0;
				display: flex;
				justify-content: space-between;
				padding-bottom: 194rpx;
				.item {
					width: 64rpx;
					height: 64rpx;
					background: #354E44;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					image {
						width: 64rpx;
						height: 64rpx;
					}
					&:nth-last-child(-n + 2) {
						image {
							width: 40rpx;
							height: 33rpx;
						}
					}
				}
			}
		}
	}
}

</style>
